<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%;"  border :height="tableHeight"   stripe v-loading="loading">
            <el-table-column prop="id" label="类目编号" v-if="!hideTableColumn.includes('activityConfigId')" width="210" align="center"></el-table-column>
            <el-table-column prop="name" label="类目名称" v-if="!hideTableColumn.includes('activityTypeName')" align="center"></el-table-column>
            <el-table-column label="排序" align="center" prop="createTime" width="170"  v-if="!hideTableColumn.includes('sort')">
              <template slot-scope="scope">
                <div v-has="'shop:shopOperation:sort'">
                  <el-button  size="mini" @click="hanleSort(scope.row,scope.$index,'2')" :disabled="scope.$index=='0'">置顶</el-button>
                  <el-button icon="el-icon-top" circle size="mini" @click="hanleSort(scope.row,scope.$index,'0')" :disabled="scope.$index=='0'"></el-button>
                  <el-button icon="el-icon-bottom" circle size="mini" @click="hanleSort(scope.row,scope.$index,'1')" :disabled="scope.$index==searchForm.pageSize-1"></el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="展示状态"  v-if="!hideTableColumn.includes('status')" align="center">
              <template #default="scope">
                <div class="d-flex justify-center">
                  <MySwitch :value.sync="scope.row.displayStatus" :id="scope.row.id" text="启用|禁用" textValue="0|1" @changeStatus="handleChangeStatus(scope.$index)" :permission="hasBtn('operatingTools:shopOperation:status')"></MySwitch>
                </div>
              </template>
            </el-table-column>

           <!-- <el-table-column prop="supplierName" label="更新日期" v-if="!hideTableColumn.includes('name')" align="center"></el-table-column> -->
          </el-table>
        </div>
        <!-- <div class="page" ref="page">
           <MyPagination
              v-show="total"
             :total="total"
             :page.sync="searchForm.pageNum"
             :limit.sync="searchForm.pageSize"
             @pagination="dataInfo"
           />
        </div> -->
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    getHouNiaoGoodsCategory, updHouNiaoGoodsCategory
  } from '@/api/getData'
  import option from '../../common/option.js';
  export default {
    data() {
      return {
        loading: false,
        btnLoading: false,
        searchForm: {
          pageNum: 1,
          pageSize: 20,
        },
        dataList:[],
        total: 0,
        tableColumn:[],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight  - 45;
      })
    },
    methods: {
      async dataInfo() {
        try {
          this.loading = true;
          const result = await getHouNiaoGoodsCategory();
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.data;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      hanleSort(row,index,type){//type 0上 1下  2置顶
        if(type=='0'){
          const upDate = this.dataList[index - 1];
          this.dataList.splice(index - 1,1);
          this.dataList.splice(index, 0, upDate) ;
        }else if(type=='1'){
          const downDate = this.dataList[index + 1];
          this.dataList.splice(index + 1, 1);
          this.dataList.splice(index, 0, downDate) ;
        }else{
          let topArr = this.dataList.splice(index , 1);
          console.log(topArr)
          this.dataList.unshift(topArr[0]);
          console.log(this.dataList)
        }
        updHouNiaoGoodsCategory({houNiaoGoodsCategory:JSON.stringify(this.dataList)}).then((result)=>{
        		if (result.code == 200) {
              this.$message.success(result.msg);
              this.dataInfo();
            } else {
              this.$message.error(result.msg);
            }
        })
      },
      async handleChangeStatus(index) {
        try {
          const result = await updHouNiaoGoodsCategory({houNiaoGoodsCategory:JSON.stringify(this.dataList)});
          if (result.code == 200) {
            this.$message.success(result.msg);
          } else {
            this.$message.error(result.msg);
          }
        } catch (err) {
          console.log(err)
        }
      },
    }
  }
</script>

<style scoped lang="scss">

  .title{
    text-align: center;
    margin:5px 0;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }

</style>
